<template>
	<el-card v-loading="loading">
		<div>
			<!--      <div-->
			<!--        style="margin-bottom: 20px; font-size: 20px;color: #606266;display: flex;align-items: center; cursor: pointer;">-->
			<!--        <span>版本发布</span>-->
			<!--      </div>-->
			<el-page-header style="margin-top: -15px;margin-bottom: 20px; border-bottom : 1px solid #e1e1e1" @back="goBack">
				<div slot="title"><div style="font-size: 16px;line-height: 50px;color: #333">返回</div></div>
				<div slot="content"><div style="font-size: 20px;line-height: 50px;color: #333">版本发布</div></div>
			</el-page-header>
			<div class="info-content">
				<el-row>
					<el-col :xs="12" :sm="12" :md="8" :lg="8"><info-list-card :data="info1" /></el-col>
					<el-col :xs="12" :sm="12" :md="8" :lg="8"><info-list-card :data="info2" /></el-col>
				</el-row>
			</div>
		</div>

		<div class="search-container">
			<div class="filter">
				<el-form ref="filterForm" label-width="80px" size="small" label-position="left">
					<el-form-item label="关键词：">
						<el-input v-model="searchKw" placeholder="请输入内容" class="search-wrap">
							<el-select slot="prepend" v-model="searchSelect" placeholder="请选择" style="width: 120px;">
								<el-option label="小程序名称" value="nickName" />
								<el-option label="APPID" value="appId" />
							</el-select>
						</el-input>
					</el-form-item>
					<el-form-item label="筛选：">
						<el-radio v-model="searchStatus" :label="0">全部</el-radio>
						<el-radio v-model="searchStatus" :label="1">待更新</el-radio>
						<el-radio v-model="searchStatus" :label="2">提交中</el-radio>
						<el-radio v-model="searchStatus" :label="3">审核中</el-radio>
						<el-radio v-model="searchStatus" :label="4">已上线</el-radio>
					</el-form-item>

					<el-form-item class="filter-btn">
						<el-button type="primary" round @click="handleSearch">查 询</el-button>
						<!-- <el-button round>重 置</el-button> -->
					</el-form-item>
				</el-form>
			</div>
		</div>

		<el-table ref="table" :data="wxappList" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" :selectable="checkSelectable" width="80" />

			<el-table-column prop="appName" width="166" label="小程序名称" />

			<el-table-column prop="businessName" label="商户名称" />
			<el-table-column prop="appId" label="appId" />

			<el-table-column prop="onlineStatus" label="版本" width="180">
				<template slot-scope="scope">
					<div>
						<span style="width: 70px">线上版本：</span>
						<span v-if="scope.row.onlineVersionId !== 0" type="success">{{ scope.row.onlineVersionNum }} 【{{ scope.row.onlineVersionTemplateId }}】</span>
						<span v-else>-</span>
					</div>
					<div>
						<span style="width: 70px">审核版本：</span>
						<span v-if="scope.row.state === 3" type="danger">{{ scope.row.auditVersionNum }} 【{{ scope.row.auditVersionTemplateId }}】</span>
						<span v-else>-</span>
					</div>
					<div>
						<span style="width: 70px">体验版本：</span>
						<span v-if="scope.row.previewVersionNum" type="danger">{{ scope.row.previewVersionNum }} 【{{ scope.row.previewVersionTemplateId }}】</span>
						<span v-else>-</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="createTime" label="提审状态">
				<template slot-scope="scope">
					<!-- <div>
						<el-tag v-if="scope.row.onlineVersionId === tpl.versionDetail.id" type="success">已上线</el-tag>
						<el-tag v-else-if="scope.row.inAudit" type="danger">审核中</el-tag>
						<el-tag v-else-if="scope.row.onlineVersionId !== tpl.versionDetail.id">待更新</el-tag>
						<span v-else>-</span>
					</div> -->
					<div>
						<el-tag v-if="scope.row.appState === 4" type="success">已上线</el-tag>
						<el-tag v-else-if="scope.row.appState === 1">待更新</el-tag>
						<el-tag v-else-if="scope.row.appState === 2" type="danger">提交中</el-tag>
						<el-tag v-else-if="scope.row.appState === 3" type="danger">审核中</el-tag>
						<span v-else>-</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="createTime" label="授权时间" />
			<el-table-column prop="previewVersionTime" label="提交时间">
				<template slot-scope="scope">
					{{scope.row.previewVersionTime ? scope.row.previewVersionTime : '-'}}
				</template>
			</el-table-column>
			<el-table-column prop="option" align="center" label="操作">
				<template slot-scope="scope">
					<el-button :disabled="scope.row.state !== 1" type="text" size="small" @click="handleSelect(scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-row style="margin-top: 10px">
			<el-col :span="12"><el-button :disabled="!selectList || selectList.length == 0" plain type="primary" size="small" @click="handleRelease">批量发布</el-button></el-col>
			<el-col :span="12">
				<el-pagination
					class="pagination"
				 :current-page.sync="pageNum"
					:page-size="pageSize"
					:page-sizes="[10, 20, 50]"
					layout="total, sizes, prev, pager, next"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				/>
			</el-col>
		</el-row>

		<el-dialog width="800px" title="批量发布结果" :visible.sync="dialogTableVisible" @close="closeDialogTableVisible">
			<el-table :data="results">
				<el-table-column property="id" label="小程序名称">
					<template slot-scope="scope">
						{{ wxappMap[scope.row.id].appName }}
					</template>
				</el-table-column>
				<el-table-column property="id" label="商户名称">
					<template slot-scope="scope">
						{{ wxappMap[scope.row.id].businessName }}
					</template>
				</el-table-column>
				<el-table-column property="errorCode" label="更新状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.errorCode === 0" type="success">成功</el-tag>
						<el-tag v-else-if="scope.row.errorCode === 2" type="warning">提交中</el-tag>
						<el-tag v-else type="danger">失败</el-tag>
					</template>
				</el-table-column>
				<el-table-column property="errorMsg" label="更新信息">
					<template slot-scope="scope">
						<span v-if="scope.row.errorCode !== 0">{{ scope.row.errorMsg }}</span>
						<span v-else>更新成功</span>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</el-card>
</template>

<script>
import { getInnerWxappPage, batchUpdate } from '@/api/wxapp';
import { getClassifyTplDetail } from '@/api/wxappClassify';
import InfoListCard from '@/components/InfoListCard';

export default {
	name: 'WxappRelease',
	components: {
		InfoListCard
	},
	props: {
		classifyTplId: {
			require: true
		}
	},
	data() {
		return {
			pageNum: 1,
			pageSize: 10,
			total: 0,
			loading: false,
			results: [],
			dialogTableVisible: false,
			searchSelect: 'nickName',
			searchKw: '',
			searchStatus: 1,
			tpl: {},
			info1: [],
			info2: [],
			selectList: [],
			wxappList: [],
			wxappMap: {}
		};
	},
	mounted() {
		getClassifyTplDetail(this.classifyTplId).then(res => {
			this.tpl = res.data;
			this.getWxappList();
			const info1 = [];
			const info2 = [];
			const versionDetail = this.tpl.versionDetail;
			info1.push({ name: '模板', value: `${this.tpl.classifyName} - ${this.tpl.name}` });
			info1.push({ name: '版本号', value: `${versionDetail.versionNum}`, tag: 'success' });
			info1.push({ name: '更新说明', value: versionDetail.updateMsg });

			if (Number(this.tpl.autoUpdate) === 1) {
				info2.push({ name: '自动更新', value: '是', tag: 'success' });
			} else {
				info2.push({ name: '自动更新', value: '否', tag: 'danger' });
			}

			info2.push({ name: '模板ID', value: versionDetail.templateId });
			info2.push({ name: '更新时间', value: versionDetail.updateTime });
			this.info1 = info1;
			this.info2 = info2;
		});
	},
	methods: {
		checkSelectable(row) {
			if (this.tpl.versionDetail.id === row.onlineVersionId) {
				return false;
			}
			if (row.appState !== 1) {
				return false;
			}
			return row.auditVersionId === 0 || row.auditStatus === 1;
		},

		handleSearch() {
			this.pageNum = 1;
			this.getWxappList();
		},

		handleSelectionChange(val) {
			const l = [];
			let i = 0;
			for (i = 0; i < val.length; i++) {
				l.push(val[i]['id']);
			}
			this.selectList = l;
		},
		goBack() {
			this.$router.back();
		},
		handleSelect(data) {
			this.$router.push({ name: 'wxappDetail', params: { wxappRelationId: data.id } });
		},
		handleCurrentChange(data) {
			this.pageNum = data;
			this.getWxappList();
		},
		handleSizeChange(data) {
			this.pageSize = data;
			this.pageNum = 1;
			this.getWxappList();
		},

		handleRelease() {
			if (this.selectList.length <= 0) {
				this.$message.error('请选择需要更新的小程序');
				return;
			}
			this.loading = true;
			const data = { versionId: this.tpl.versionDetail.id, list: this.selectList };
			let i = 0;

			const map = {};
			for (i = 0; i < this.wxappList.length; i++) {
				const item = this.wxappList[i];
				map[item.id] = item;
			}
			this.wxappMap = map;
			batchUpdate(data)
				.then(res => {
					this.loading = false;
					this.results = res.data;
					this.dialogTableVisible = true;
				})
				.catch(error => {
					this.loading = false;
				});
		},
		closeDialogTableVisible() {
			this.searchStatus = 1;
			this.getWxappList();
		},
		getWxappList() {
			let appState = this.searchStatus;
			if (this.searchStatus === 0) {
				appState = null;
			}
			const data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				appState: appState,
				versionId: this.tpl.versionId
			};
			data[this.searchSelect] = this.searchKw;
			return getInnerWxappPage(data).then(resp => {
				this.wxappList = resp.data.row;
				this.total = resp.data.total;
			});
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.pagination {
	text-align: right !important;
}
.info-content {
}

.search-container {
	margin-top: 20px;
	margin-bottom: 20px;
}

.el-select {
	width: 120px;
}

.search-container > .el-input-group__prepend {
	background-color: #f5f7fa;
	color: #605e72;
	vertical-align: middle;
	display: table-cell;
	position: relative;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	padding: 0 20px;
	width: 1px;
	white-space: nowrap;
}

.search-wrap {
	width: 300px;
	margin-right: 10px;
}

.filter {
	.filter-btn {
		margin-bottom: 20px;
	}

	.check-all {
		margin-right: 30px;
	}

	.el-select {
		width: 100px;
	}

	.input-with-select {
		width: 400px;
	}

	// 充值单选换行
	.el-radio + .el-radio {
		margin-left: 0;
	}
	.el-radio {
		margin-right: 10px;
		height: 32px;
		line-height: 32px;
	}
}
</style>
